<template>
  <div class="page SupUser">
    <van-nav-bar title="特殊用户" left-arrow @click-left="goBack"/>
    <top-search @search="searchFunc" v-model="search.content" bgcolor="#fff"></top-search>
    <van-list class="page-content" v-model="page.loading" :finished="page.finished" finished-text="没有更多了" @load="getList">
      <div class="list-item" v-for="(item, index) in list" :key="index">
        <div class="list-group flex-row" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
          <div class="flex-row">
            <img :src="item.icon" style="width: 0.6rem; height: 0.6rem; border-radius: 50%;"/>
            <span class="font-black" style="font-size: 14px; margin-left: 0.28rem;">{{ item.nick || '无昵称' }}({{ item.userId }})</span>
          </div>
          <span class="font-blue" style="font-size: 14px;" @click="person.showBlank(item)">修改</span>
        </div>
        <div class="list-group">
          <div class="list-row">
            <span class="label-text">免费类别</span>
            <span>{{ option.freeCategory.find(v => v.value == item.freeCategory).label }}</span>
          </div>
          <div class="list-row">
            <span class="label-text">免费时长</span>
            <span>{{ item.specialPlaTime }}小时</span>
          </div>
          <div class="list-row" style="height: auto;">
            <span class="label-text" style="width: 48px; flex-shrink: 0;">免费门店</span>
            <span v-if="item.freeCategory == 0 || item.specialUserByShopModelList && item.specialUserByShopModelList.length">
              <van-tag plain type="primary" v-for="shop in item.specialUserByShopModelList" :key="shop.shopId">{{ shop.shopName }}</van-tag>
            </span>
          </div>
        </div>
      </div>
    </van-list>

    <van-popup v-model="person.show" position="bottom" :style="{ height: '100%' }">
      <add-super v-if="person.show" ref="addSuper" @close="person.onClose"/>
    </van-popup>
  </div>
</template>

<script>
import AddSuper from './AddSuper.vue';
export default {
  components: { AddSuper },
  data() {
    return {
      search: {
        content: '',
        type: 0
      },

      page: {
        page: 1,
        size: 10,
        loading: false,
        finished: false
      },
      
      list: [],

      option: {
        freeCategory: [
          { value: 0, label: '指定门店使用免费' },
          { value: 1, label: '所有门店使用免费' }
        ]
      },

      person: {
        show: false,
        showBlank: (item) => {
          this.person.show = true;
          this.$nextTick(() => {
            this.$refs.addSuper.setValue(item);
          });
        },
        onClose: (type) => {
          if (type) {
             this.$axios.get('/api/SpecialUserController/getSpecialUserList', {
               page: 1, size: 1, userName: type.userId
             }).then(res => {
              let json = res || {}; 
              let list = json.list || [];
              let index = this.list.map(item => item.userId).indexOf(type.userId);
              this.list.splice(index, 1, list[0]);
            });
          }
          this.person.show = false;
        }
      }
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    getList() {
      let sPage = JSON.parse(JSON.stringify(this.page));
      let page = sPage.page, size = sPage.size;
      this.page.loading = true;
      
      let search = JSON.parse(JSON.stringify(this.search));
      let query = { page, size };
      if (search.content) query.userName = search.content;

      this.$axios.get('/api/SpecialUserController/getSpecialUserList', query).then(res => {
        let json = res || {}; 
        let list = json.list || [];
        this.list.push( ...list );
        let finished = json.isLastPage ? true : false;
        this.page = { ...sPage, page: sPage.page + 1, loading: false, finished };
      }).catch(() => {
        this.page = { ...sPage, loading: false, finished: true };
      });
    },
    searchFunc() {
      this.page = { page: 1, size: 10, loading: false, finished: false };
      this.list = [];
      this.getList();
    }
  },
  mounted() { 
  }
};
</script>

<style lang="less">
.SupUser {
}
</style>
